<template>
  <div class="maincontent">
    <div class="left">
      <LeftCircleTwoTone
        style="padding-right: 10px"
        @click="handleRouterGoBack"
      />
      <a-breadcrumb :routes="navList"></a-breadcrumb>
    </div>
    <div class="right"></div>
  </div>
</template>

<script lang="ts" setup>
import { LeftCircleTwoTone } from "@ant-design/icons-vue";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const handleRouterGoBack = () => {
  router.go(-1);
};
const route = useRoute();
const navList = computed(() => {
  return route.matched.map((item) => {
    return {
      breadcrumbName: item.meta?.title,
      path: item.path,
    };
  });
});
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.maincontent {
  height: 35px;
  display: flex;
  justify-content: center;
  .left {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .right {
    height: 100%;
    width: 100%;
  }
}
</style>
